<%@page import="com.digitalchina.cfs.record.model.DiseaseRecord"%>
<%@page import="com.digitalchina.frame.util.PropertiesUtils"%>
<%@ page language="java" import="java.util.*,com.opensymphony.xwork2.ActionContext" pageEncoding="utf-8"%>
<%@ page import="java.io.*"%>
<%@page import="java.text.SimpleDateFormat"%>
<%
	String webPath = request.getContextPath();
	String maxAmount=PropertiesUtils.getProperty("conf/config-cfs.properties", "cfs.data.trans.maxAmount");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>国家癌症信息中心病案监测网络平台</title>
	<meta charset="utf-8">
	<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /> -->
	<link rel="stylesheet" type="text/css" href="<%=webPath%>/css/dzbl.css"/>
	<script src="<%=webPath %>/js/echarts.js" charset="utf-8"></script>
	<script type="text/javascript" src='<%=webPath%>/js/jquery-easyui-1.3.2/jquery-1.8.0.min.js'></script>
	
	<script type="text/javascript">
		var ec,theme;
		require.config({
			paths:{
				echarts:"<%=webPath %>/js/charts"
			}
		});
		require(
				[
					"echarts",
					"echarts/chart/map"
				],
				function(e,t){
					ec=e;
					theme=t;
					DrawEChart(ec,theme);
				}
			);
		
		function DrawEChart(ec,theme){
			DrawMap(ec,theme);
		};
		function DrawMap(ec,theme){
			mapChart = ec.init(document.getElementById("main"),theme);
			var option = {
				    backgroundColor: '#1b1b1b',
				    color: ['gold','aqua','lime'],
				    title : {
				        text: '中国地图',
				        //subtext:'数据纯属虚构',
				        x:'center',
				        textStyle : {
				            color: '#fff'
				        }
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: '{b}'
				    },
				    /* legend: {
				    	orient : 'vertical',
						x : 'left',
						selected:{
							'红色：运行过载':true,
							'黄色：运行饱和':true,
							'绿色：运行良好':true,
							'蓝色：运行通畅':true,
							'灰色：停机':true
						},
						data:[{
							name:'红色：运行过载',
							textStyle:{color:'#ff3333'}
						},{
							name:'黄色：运行饱和',
							textStyle:{color:'#FFFF00'}
						},{
							name:'绿色：运行良好',
							textStyle:{color:'lime'}
						},{
							name:'蓝色：运行通畅',
							textStyle:{color:'aqua'}
						},{
							name:'灰色：停机',
							textStyle:{color:'#CFCFCF'}
						}]
				    }, */
				    /* toolbox: {
				        show : true,
				        orient : 'vertical',
				        x: 'right',
				        y: 'center',
				        feature : {
				            mark : {show: true},
				            dataView : {show: true, readOnly: false},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    }, */
				    dataRange: {
				        min : 0,
				        max : <%=maxAmount%>,
				        calculable : true,
				        color: ['#ff3333', 'orange', 'yellow','lime','aqua'/* ,'#CFCFCF' */],
				        textStyle:{
				            color:'#fff'
				        }
				    },
				    series : [ 
				        {
				            name: '中国',
				            type: 'map',
				            mapType: 'china',
	                        roam: true,
	                      	hoverable: false,
	                      	//selectedMode : 'single',
	                        itemStyle:{
				                normal:{
	                                label:{
	                                	show:true,
	                                    textStyle:{
	                                        fontSize:20,
	                                        fontWeight:'bold'
	                                    }
	                                },
				                    borderColor:'rgba(100,149,237,1)',
				                    borderWidth:0.5,
				                    areaStyle:{
				                        color: '#1b1b1b'
				                    }
				                }
				            },
				            data:[{name: '长沙县'},
									{name: '开福区',itemStyle:{normal:{color:"#1b1b1b"}}},
									{name: '宁乡县',itemStyle:{normal:{color:"#1b1b1b"}}},
									{name: '天心区',itemStyle:{normal:{color:"#1b1b1b"}}},
									{name: '望城区',itemStyle:{normal:{color:"#1b1b1b"}}},
									{name: '雨花区',itemStyle:{normal:{color:"#1b1b1b"}}},
									{name: '岳麓区',itemStyle:{normal:{color:"#1b1b1b"}}},
									{name: '芙蓉区',itemStyle:{normal:{color:"#1b1b1b"}}},
									{name: '浏阳市',itemStyle:{normal:{color:"#1b1b1b"}}}],
				            markLine : {
				                smooth:true,
	                            symbol: ['circle', 'circle'],
	                            symbolSize:[1,4],
				                effect : {
				                    show: true,
				                    scaleSize: 1,
				                    period: 30,
				                    color: '#fff',
				                    shadowBlur: 10
				                },
				                itemStyle : {
				                    normal: {
				                        borderWidth:2,
				                        lineStyle: {
				                            type: 'solid',
				                            shadowBlur: 2
				                        }
				                    }
				                },
				                data : [
									[{name:'岳麓区前置机'},{name:'长沙市平台',value:10}],
									[{name:'芙蓉区前置机'},{name:'长沙市平台',value:90}],
									[{name:'雨花区前置机'},{name:'长沙市平台',value:80}],
									[{name:'天心区前置机'},{name:'长沙市平台',value:70}],
									[{name:'长沙县前置机'},{name:'长沙市平台',value:60}],
									[{name:'开福区前置机'},{name:'长沙市平台',value:50}],
									[{name:'望城区前置机'},{name:'长沙市平台',value:40}],
									[{name:'宁乡县前置机'},{name:'长沙市平台',value:30}]
									//[{name:'浏阳市前置机'},{name:'长沙市平台',value:20}]
				                ]
				            },
				            markPoint : {
				                symbol:'emptyCircle',
				                symbolSize : function (v){
				                	if(v==-1){
				                		return 15;
				                	}
				                	v=10+v/(<%=maxAmount%>/5);
				                	if(v>15){
				                		v=15;
				                	}
				                	return v;
				                },
				                effect : {
				                    show: true,
				                    shadowBlur : 0
				                },
				                itemStyle:{
				                    normal:{
				                        label:{show:false}
				                    },
				                    emphasis: {
				                        label:{
				                        	position:'top',
				                        	textStyle:{
				                        		color:'white'
		                                    }
				                        }
				                    }
				                },
				                data : [
									{name:'岳麓区前置机',value:10},
									{name:'芙蓉区前置机',value:90},
									{name:'雨花区前置机',value:80},
									{name:'天心区前置机',value:70},
									{name:'长沙县前置机',value:60},
									{name:'开福区前置机',value:50},
									{name:'望城区前置机',value:40},
									{name:'宁乡县前置机',value:30},
									{name:'浏阳市前置机',value:-1}
				                ]
				            },
				            geoCoord: {
				            	'长沙市平台': [112.945261,28.234417],
				                '岳麓区前置机': [112.938003,28.241609],
				                '芙蓉区前置机': [113.041344,28.210036],
				                '雨花区前置机': [113.042350,28.142277],
				                '天心区前置机': [112.989745,28.118703],
				                '长沙县前置机': [113.087337,28.252173],
				                '开福区前置机': [112.992476,28.261973],
				                '望城区前置机': [112.840698,28.359921],
				                '宁乡县前置机': [112.558127,28.284624],
				                '浏阳市前置机': [113.649317,28.170303]
				            }
				        }
				    ]
				};
			getMapData(mapChart,option);
		}	
		function getMapData(chart,option) {
		    //获得图表的options对象  	
		    //通过Ajax获取数据  
		    var options;  
		    if(!option){
		    	options = chart.getOption();
		    }else{
		    	options = option;
		    }
		    $.ajax({    
		        type : "post",    
		        url : "<%=webPath%>/diseaseRecordAction!queryDataTransList.action?refresh="+Math.random(), 
		        dataType : "json", 
		        success : function(result) {
		            options.series[0].markLine.data = result[0];
		            options.series[0].markPoint.data = result[1];
		            options.series[0].geoCoord = result[2];
		            chart.hideLoading(); 
		            chart.setOption(options);
		        },  
		        error : function(errorMsg) {  
		            alert("加载数据失败！");  
		        }  
		    });
		 }
	</script>
</head>
<body>
<form action=""></form>
	<div class="contain">
		<div class="wrap">
			<p class="title">数据传输情况监控</p>
			<div id="main" style="height:480px;"></div>
		</div>
    </div>
</body>
</html>